<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<head>
    <meta charset="utf-8">
    <meta name="description" content="A jquery plugin to create simple donut, bar or line charts with dom nodes, style with css.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cssCharts.js - jquery css charts</title>

    <link rel="stylesheet" href="./plugin/chart/cssCharts.css">
    <script src="./plugin/chart/jquery.chart.js"></script>

    <style>
      /* page specific styles*/
      h1{text-align:center;font-family:sans-serif;font-size:28px;color:#333;padding:40px 0 0 0;}
      h2{text-align:center;font-family:sans-serif;font-size:18px;color:#333;padding:40px 0 0 0;}
      hr{width:60%;height:1px;background:none;border:none;border-bottom:1px dashed rgba(0,0,0,0.1);outline:none;margin:40px auto 60px auto;}
      .desc p{text-align:center;font-size:16px;color:rgba(0,0,0,0.6);padding:20px 0 0 0;font-family:sans-serif;}
      .desc a{color:blue;}
      .wrap{margin:0 auto;width:640px;padding-bottom:100px;}
      #line{width:400px;}
      /* page specific styles*/
      .chart {margin-top: 50px!important;margin-left: 50px!important;}
    </style>
</head>

<s:hidden name="idUtente" value="%{idUtente}"/>
<h2>Andamento punti giornalieri ultimi 10 giorni</h2>
</hr>
<div class="chart">
	<ul class="bar-chart dotted" data-bars="[29,0],[20,0],[30,0],[25,0],[28,0],[28,0],[28,0],[28,0],[28,0],[28,0]" data-max="30" data-unit="p" data-width="20"></ul>
</div>

</br></br>

<h2>Ultimi 10 giorni hai mangiato</h2>
</br>
<div class="chart">
  <div class="pie-thychart" data-set='[["Verdura", 60], ["Carne",20], ["Legumi",20]]' data-colors="#009900,#F17F49,#7B2A1F"></div>
</div>

<script>
  $(function() {
	  $('.bar-chart').cssCharts({type:"bar"});
      $('.pie-thychart').cssCharts({type:"pie"});
  });
</script>